<template>
  <div>
    <div style="display:flex;flex-direction:row;justify-content:space-between;">
      <section-tree v-if="teacherOpeSet" style="width: 60%" @preview="previewModal" @lv1Clk="handleLv1Clk" @editingSection="handleEditingSection" @unfoucusSection="clearFoucus"  ref="secTree"></section-tree>
      <section-tree-low v-else style="width: 60%" @preview="previewModal" @lv1Clk="handleLv1Clk" ref="secTreeLow"></section-tree-low>

      <div style="width: 40%" v-if="focusedSectionData">
        <!-- <span>{{focusedSectionData.label}} 相关</span> -->
        <section-attatchment :sectionId="focusedSectionData.sectionId" :teacherOpeSet="teacherOpeSet"  ref="atta"></section-attatchment>
        <section-discuss :sectionId="focusedSectionData.sectionId" style="margin-top: 20px" ref="diss"></section-discuss>
      </div>
    </div>
    <drawer v-if="teacherOpeSet" @closed="handleDrawerClose" :title="editingSectionTitle" :display.sync="editDrawerDisplay" :inner="true"  :mask="true">
      <richtexteditor v-if="editDrawerDisplay" :initialContent="editingSectionContent" @preview="previewModal" @save="saveSection" ref="redt" />
    </drawer>
    <el-dialog
      :title="previewTitle"
      :visible.sync="dialogVisible"
      width="60%"
      >
      <richtextpreview v-if="dialogVisible" :content="previewContent" ref="rpe"/>
    </el-dialog>
  </div>
</template>

<script>
import SectionTree from './SectionTree'
import SectionTreeLow from './SectionTreeLow'
import SectionAttatchment from './SectionAttatchment'
import SectionDiscuss from './SectionDiscuss'
import drawer from '@/components/drawer'
import richtexteditor from '@/components/richtexteditor'
import richtextpreview from '@/components/richtextpreview'
import sectiontree from '@/api/sectiontree.js'
import { Message } from 'element-ui'
export default {
  name: 'Section',
  data() {
    return {
      editDrawerDisplay: false,
      editingSectionId: null,
      editingSectionContent: '',
      editingSectionTitle: null,
      previewContent: '',
      previewTitle: '',
      dialogVisible: false,
      teacherOpeSet: false,
      focusedSectionData: null,
    };
  },
  components: {
    SectionTree,
    SectionTreeLow,
    SectionAttatchment,
    SectionDiscuss,
    drawer,
    richtexteditor,
    richtextpreview,
  },
  mounted() {
    let roleId = localStorage.getItem('roleId')
    this.teacherOpeSet = roleId === '2';
  },
  methods: {
    clearFoucus() {
      this.focusedSectionData = null
    },
    handleLv1Clk(data) {
      this.focusedSectionData = data
      if (this.$refs.atta) {
        this.$refs.atta.loadAttachmentList();
      }
      if (this.$refs.diss) {
        this.$refs.diss.loadDissList(data.sectionId);
      }

    },
    handleEditingSection(data) {
      this.editingSectionId = data.sectionId;
      this.editingSectionTitle = data.label
      this.editingSectionContent = data.sectionContent
      console.log("handleEditingSection:", data)

      this.editDrawerDisplay = true;


    },
    handleDrawerClose() {
      this.editingSectionId = null
      this.editingSectionContent = '';
      this.editDrawerDisplay = false
    },
    saveSection(contentHtml) {
      console.debug("SAVE ::", contentHtml)
      sectiontree.saveSectionContent([{
        sectionId: this.editingSectionId,
        sectionContent: contentHtml
      }]).then(resp => {
        Message({
          message: '已保存当前内容',
          type: 'success',
          duration: 3 * 1000
        })
        this.$refs.secTree.fetchSectionTree()
      })
    },
    previewModal(contentHtml, title) {
      if (contentHtml === null) {
        contentHtml = '';
      }
      if (title) {
        this.previewTitle = title;
      } else {
        this.previewTitle = this.editingSectionTitle;
      }
      this.previewContent = contentHtml;
      console.debug("emit html:::", contentHtml)
      this.dialogVisible = true;
    }
  }
}
</script>
